<template>
	<view class="cart">
		<view class="kl" v-if="log.phone!=''">
			<view class="goods" v-for="(item,i) in cartList" :key="i" v-if="item.show==false">
				<view class="shop">
					<view class="box">
						<image @click="checkOne(item)" v-show="item.selected==false" src="../../static/cz_zc@2x.png"></image>
						<image @click="checkOne(item)" v-show="item.selected==true" src="../../static/cz_xz@2x.png"></image>
					</view>
					<view class="klf" @touchstart.prevent="starts(item)" @touchend="ends(item.goodid)" @touchmove="clear()">
						<view class="img">
							<image :src="item.goodImg"></image>
						</view>
						<view class="text">
							<view>{{item.goodName}}</view>
							<view>￥{{item.goodPrice}}</view>
							<view>￥{{item.goodPrice}}</view>
						</view>
					</view>
				</view>
				<template>
					<u-number-box v-model="item.num" button-size="24" @change="valChange"></u-number-box>
				</template>
			</view>
		</view>
		<view class="foot">
			<view class="sh">
				<view class="img">
					<image @click="checkAll" v-show="checkall==false" src="../../static/cz_zc@2x.png"></image>
					<image @click="checkAll" v-show="checkall==true" src="../../static/cz_xz@2x.png"></image>
					<text> 全选</text>
				</view>
				<view class="pay">
					<view>合计:<text>￥{{Price}}</text></view>
					<u-button @click="pay" size="medium" type="error" shape="circle">结算</u-button>
				</view>
			</view>
		</view>
		<!-- 内容为空 -->
		<u-empty v-show="cartList.length==0 || log.phone==''" mode="car" 
				icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
	</view>
</template>

<script>
import {apiCart} from '../../api/mock'
import { mapActions,mapState } from 'vuex'
	export default {
		data() {
			return {
				list:[],// 接收数据
				value:1,// 下单数量初始值
				checkall:false,// 全选状态
				checkone:[],//单选状态储存
				price:0,// 商品单价
				sum:0,// 计算总价
				isDel : 0,// 当定时器的存储变量直接为某个值
			}
		},
		onLoad() {
			this.getCart();
		},
		computed:{
			...mapState('cart',['cartList']),
			...mapState('payorder',['payList']),
			...mapState('login',['users','log']),
			Price(){
				this.price=0;
				this.cartList.forEach((item)=>{
					if(item.selected && item.show==false){
						this.price +=item.goodPrice * item.num;
					}
				})
				return this.price;
			}
		},
		methods: {
			...mapActions('payorder',['actionPayList','actionEmptyList']),
			// 开始触发定时器：800毫秒后执行删除
			starts(item){
				this.isDel =setTimeout(()=>{
					this.LongTapDel(item);
				},800);
				return false;
			},
			// 长按删除
			LongTapDel(item){
				// 重置定时器
				clearTimeout(this.isDel);
				this.isDel =0;	// 后期想要对定时器进行判断的话，那么重置为某个值更好操作
				// 弹窗显示 uni.showModal
				uni.showModal({
					title:'提示',
					content:'是否删除当前岗位',
					success:(res)=>{
						if(res.confirm){
							item.show =true;
							uni.showToast({title:'删除成功'})
							this.checkall =false;
						}else if(res.cancel){
							uni.showToast({
								icon:"none",
								title:'已取消'
							})
						}
					}
				})
			},
			// 手指离开屏幕时，先判断定时器确认为空后跳转到详情页
			ends(id){
				// 没有坚持到800毫秒
				clearTimeout(this.isDel);
				// 判断定时器的存储空间是否被覆盖过
				if(this.isDel !=0){
					uni.navigateTo({
						url:'/pages/detail/detail?id='+Number(id),
					})
				}
				return false;
			},
			// 移动
			clear(){
				clearTimeout(this.isDel);
				this.isDel =0;
			},
			// 结算
			pay(){
				console.log(this.cartList);
				this.actionEmptyList();
				if(this.cartList.length == 0){
					uni.showToast({
						icon:'error',
						title:'购物车没有商品'
					})
				}else{
					this.cartList.forEach((item)=>{
						if(item.selected==true||this.checkall==true){
							let obj ={
							sum : this.Price,
							kd : '普通配送 (包邮)',
							bz : '',
							yf : 0.00,
							yfx : 0.00,
							time : new Date().getTime(),
							goodlist : this.cartList.filter(item=>item.selected==true)
						}
							this.actionPayList(obj)
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/pay/pay'
								})
							},100)
						}else{
							uni.showToast({
								icon:'error',
								title:'请选择商品'
							})
						}
					})
				}
			},
			// 单选
			checkOne(e){
				e.selected = !e.selected;
				let k =this.cartList.filter(item=>item.selected==true).length;
				console.log(k);
				if(k==this.cartList.length){
					this.checkall =true;
				}else{
					this.checkall =false;
				}
			},
			// 全选
			checkAll(){
				this.checkall =!this.checkall;
				if(this.checkall){
					this.cartList.forEach((item,i)=>{
						item.selected =true;
					})
				}else{
					this.cartList.forEach((item,i)=>{
						item.selected =false;
					})
				}
			},
			// 下单数量
			valChange(e){
				console.log('当前值为: ' + e.value)
			},
			// 获取购物车数据
			getCart(){
				apiCart().then((res)=>{
					this.list =res;
					console.log(this.list);
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style>
.cart{
	width: 100%;
}
.kl{
	padding-bottom: 62px;
}
.goods{
	width: 100%;
	border-bottom: 1px solid #efefef;
}
.goods .shop{
	width: 96%;
	margin: 0 auto;
	padding: 8px;
	display: flex;
	justify-content: space-around;
}
.goods .shop .box{
	width: 6%;
	height: 20px;
	margin-top: 10%;
}
.goods .shop .box image{
	width: 100%;
	height: 100%;
}
.goods .shop .klf{
	width: 88%;
	display: flex;
}
.goods .shop .img{
	width: 25%;
	height: 100px;
}
.goods .shop .img image{
	width: 100%;
	height: 100%;
}
.goods .shop .text{
	width: 62%;
}
.goods .shop .text view{
	padding: 4px;
}
.goods .shop .text view:nth-child(1){
	font-size: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.goods .shop .text view:nth-child(2){
	font-size: 12px;
	color: #cecece;
}
.goods .shop .text view:nth-child(3){
	font-size: 18px;
	font-weight: bold;
}
.goods .u-number-box{
	padding-bottom: 10px;
	margin-left: 68%;
}
.foot{
	width: 100%;
	height: 60px;
	line-height: 60px;
	position: fixed;
	bottom: 50px;
	background-color: white;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #dddddd;
	
	bottom: 10;
}
.foot .sh{
	width: 96%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.foot .img{
	width: 18%;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.foot .img image{
	width: 20px;
	height: 20px;
}
.foot .pay{
	width: 70%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.foot .pay view{
	width: 45%;
}
.foot .pay text{
	color: red;
}
.foot .pay .u-button{
	width: 120px;
	height: 40px;
	line-height: 40px;
}
</style>